<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @keyframes ColorChange {
        0% {
          outline: 1px solid lightgreen;
        }

        50% {
          outline: 1px solid green;
        }

        1000% {
          outline: 1px solid lightgreen;
        }
      }

      svg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        outline: 1px solid red;
        animation: ColorChange 500ms ease infinite;
      }

      line,
      polyline,
      rect {
        stroke-linecap: round;
        stroke-linejoin: round;
      }
    </style>
  </head>

  <body>
    <svg width="600"
         height="600"
         xmlns="http://www.w3.org/2000/svg"
         xmlns:xlink="http://www.w3.org/1999/xlink"
         preserveAspectRatio="xMinYMin meet"
         stroke-linecap="round"
         stroke-linejoin="round"
         viewBox="0 0 600 600">

      <!-- 第十一章 滤镜、投影 -->

      <!-- feComposite 滤镜 svg精髓第二版144页-->
      <defs>
        <filter id="sky-in"
                filterUnits="objectBoundingBox">
          <feImage xlink:href="/source/sky.jpg"
                   result="sky"
                   x="0"
                   y="0"
                   width="100%"
                   height="100%"
                   preserveAspectRatio="none" />
          <feComposite in="sky"
                       in2="SourceGraphic"
                       operator="in" />
        </filter>
        <filter id="sky-out"
                filterUnits="objectBoundingBox">
          <feImage xlink:href="/source/sky.jpg"
                   result="sky"
                   x="0"
                   y="0"
                   width="100%"
                   height="100%"
                   preserveAspectRatio="none" />
          <feComposite in="sky"
                       in2="SourceGraphic"
                       operator="out" />
        </filter>
        <g id="flower">
          <!-- 这里绘制花朵图形 -->
          <image xlink:href="/source/flower.svg"
                 width="120px"
                 height="103px" />
        </g>
      </defs>
      <use xlink:href="#flower"
           transform="translate(10,10)"
           style="filter: url(#sky-in);" />
      <use xlink:href="#flower"
           transform="translate(170,10)"
           style="filter: url(#sky-out);" />

      <!-- feBlend 纯理论 -->

      <!-- feFlood 和 feTile 滤镜 -->
      <defs>
        <filter id="flood-filter"
                x="0"
                y="0"
                width="100%"
                height="100%">
          <feFlood flood-color="#993300"
                   flood-opacity="0.8"
                   result="tint" />
          <feComposite in="tint"
                       in2="SourceGraphic"
                       operator="in" />
        </filter>
        <filter id="tile-filter"
                x="0"
                y="0"
                width="100%"
                height="100%">
          <feImage xlink:href="/source/sky.jpg"
                   width="32"
                   height="32"
                   result="cloth" />
          <feTile in="cloth"
                  result="cloth" />
          <feComposite in="cloth"
                       in2="SourceGraphic"
                       operator="in" />
        </filter>
        <g id="flower">
          <!-- 这里绘制花朵图形 -->
          <image xlink:href="/source/sky.jpg"
                 x="350"
                 y="10"
                 width="32"
                 height="32" />
        </g>
      </defs>
      <use xlink:href="#flower"
           x="300"
           y="10"
           transform="translate(0,0)"
           style="filter: url(#flood-filter);" />
      <use xlink:href="#flower"
           x="300"
           y="10"
           transform="translate(110,0)"
           style="filter: url(#tile-filter);" />







    </svg>


    <script>
      const ele = document.querySelector("#xxx");
      let n = 0;
      function Renderer() {
        n++;
        if (n >= 360) n = 0;
        window.requestAnimationFrame(Renderer);
      }
      // Renderer();
    </script>
  </body>

</html>
